<template>
  <div class="ai-chat-full-bg">
    <el-card class="ai-chat-full-card">
      <div class="ai-chat-title">AI 问答（本地对话，不上屏/不播报）</div>
      <el-input
        v-model="input"
        placeholder="请输入你的问题..."
        @keyup.enter="send"
        class="ai-chat-input"
        clearable
      />
      <el-button type="primary" @click="send" class="ai-chat-btn">发送</el-button>
      <div class="ai-chat-history">
        <div v-for="(msg, idx) in history" :key="idx" :class="msg.role">
          <b v-if="msg.role==='user'">你：</b><span v-if="msg.role==='user'">{{ msg.content }}</span>
          <b v-if="msg.role==='ai'">AI：</b><span v-if="msg.role==='ai'">{{ msg.content }}</span>
        </div>
      </div>
    </el-card>
    <div class="dev-info-fixed">© 2025 开发者：六月 | AI Live Assistant</div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const input = ref('')
const history = ref([])
const send = async () => {
  if (!input.value.trim()) return
  history.value.push({ role: 'user', content: input.value })
  const userMsg = input.value
  input.value = ''
  try {
  const res = await axios.post('/api/ai/chat', { prompt: userMsg })
    history.value.push({ role: 'ai', content: res.data.reply || '（无回复）' })
  } catch (e) {
    history.value.push({ role: 'ai', content: 'AI接口请求失败' })
  }
}
</script>
<style scoped>
.ai-chat-full-bg {
  min-height: 100vh;
  min-width: 0;
  background: linear-gradient(135deg, #f8e1f4 0%, #e0f7fa 100%);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  margin: 0;
  padding: 0;
}
  .ai-chat-full-card {
    width: 100%;
    min-height: 100vh;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
    background: linear-gradient(120deg, #fff6fa 60%, #e0f7fa 100%);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    position: relative;
    padding: 0;
  }
  .ai-chat-title {
    font-size: 3rem;
    font-weight: 900;
    color: #b48ad6;
    margin-bottom: 48px;
    letter-spacing: 2px;
    text-shadow: 0 4px 24px #fff6fa;
  }
  .ai-chat-input {
    width: 100%;
    margin-bottom: 32px;
    font-size: 1.6rem;
  }
  .ai-chat-btn {
    width: 100%;
    margin-bottom: 32px;
    font-size: 1.6rem;
  }
  .ai-chat-history {
    width: 100%;
    min-height: 480px;
    max-height: 70vh;
    overflow-y: auto;
    background: #f8e1f4;
    border-radius: 36px;
    padding: 36px;
    font-size: 1.6rem;
    margin-bottom: 48px;
    box-shadow: 0 4px 24px #ffe0f7;
  }
.user {
  color: #7c5fa3;
  margin-bottom: 12px;
}
.ai {
  color: #ff90b3;
  margin-bottom: 18px;
}
.dev-info-fixed {
  position: fixed;
  right: 32px;
  bottom: 18px;
  color: #b48ad6;
  font-size: 1.02rem;
  letter-spacing: 1px;
  opacity: 0.85;
  z-index: 999;
  user-select: none;
}
@media (max-width: 900px) {
  .ai-chat-full-card {
    width: 98vw;
    min-height: 96vh;
  max-width: 100%;
    border-radius: 18px;
    padding: 24px 8px 24px 8px;
  }
  .ai-chat-title {
    font-size: 1.3rem;
  }
  .ai-chat-history {
    font-size: 1rem;
    padding: 10px;
  }
  .dev-info-fixed {
    right: 10px;
    bottom: 8px;
    font-size: 0.92rem;
  }
}
@media (max-width: 600px) {
  .ai-chat-full-card {
  width: 100%;
    min-height: 100vh;
  max-width: 100%;
    border-radius: 0;
    margin: 0;
    padding: 8px 2px 8px 2px;
  }
  .ai-chat-title {
    font-size: 1.1rem;
  }
  .ai-chat-history {
    font-size: 0.92rem;
    padding: 4px;
  }
  .dev-info-fixed {
    right: 2px;
    bottom: 2px;
    font-size: 0.82rem;
  }
}
</style>
